import React from 'react';

// 导入封装的组件
import { CommentCount } from './components/CommentCount';
import { Tabs } from './components/Tabs';
import { Forms } from './components/Forms';
import { CommentList } from './components/CommentList';
import { http } from './utils';

// 导入样式
import './Comment.css';

export class Comment extends React.Component {
  constructor() {
    super();
    this.state = {
      // hot: 热度排序  time: 时间排序
      tabs: [],
      active: 'hot',
      list: [],
    };
  }
  // 组件渲染完毕后，读取评论列表数据
  async componentDidMount() {
    // const list = JSON.parse(localStorage.getItem('list') || '[]');
    // console.log(list);
    // // 设置页面数据
    // this.setState({
    //   list: list,
    // });
    // 发起网络请求
    const { data: tabs } = await http.get('/tabs');
    const { data: list } = await http.get('/list');

    this.setState({
      tabs: tabs,
      list: list,
    });
  }

  componentDidUpdate() {
    console.log('页面数据变化了');
    localStorage.setItem('list', JSON.stringify(this.state.list));
  }

  // 排序
  changeSortType = (type) => {
    console.log(type);
    if (type === 'time') {
      const newList = this.state.list.sort((a, b) => {
        // 日期升序
        // 第1个参数：要排序的数组，第2个参数：要排序的字段，第3个参数：排序方式
        return Date.parse(a.time) - Date.parse(b.time);
        // 日期降序
        // return Date.parse(b.time) - Date.parse(a.time);
      });

      // const sorted = _.orderBy(this.state.list, ['time'], ['asc']);
      // 设置页面数据
      this.setState({
        list: newList,
        active: type,
      });
    } else {
      const newList = this.state.list.sort((a, b) => {
        // id升序
        // return a.id - b.id;
        // id降序
        return b.id - a.id;
      });
      // 设置页面数据
      this.setState({
        list: newList,
        active: type,
      });
    }
  };

  // 删除评论事件处理
  delComment = async (id) => {
    // 删除服务器评论
    const res = await http.delete(`/list/${id}`);
    console.log(res);
    // 重新获取数据
    const { data: list } = await http.get('/list');
    // 设置页面数据
    this.setState({
      list,
    });
    // 从数组中删除一个元素
    // console.log(id);
    // // const newList = this.state.list.filter((item) => !(item.id === id));
    // const newList = this.state.list.filter((item) => item.id !== id);
    // // 设置页面数据
    // this.setState({
    //   list: newList,
    // });
  };

  // 点赞或点踩事件处理函数
  changeAttitude = async (id, attitude) => {
    const res = await http.patch(`/list/${id}`, { attitude });
    console.log(res);
    // 重新获取数据
    const { data: list } = await http.get('/list');
    // 设置页面数据
    this.setState({
      list,
    });
    // console.log(id, attitude);
    // const newList = this.state.list.map((item) => {
    //   if (item.id === id) {
    //     return { ...item, attitude };
    //   } else {
    //     return item;
    //   }
    // });
    // // 设置页面数据
    // this.setState({
    //   list: newList,
    // });
  };

  // 发表评论
  addComment = async (txt) => {
    console.log('子组件传入的：', txt);
    // 模拟提交数据到服务器
    const res = await http.post('/list', {
      author: '韩振',
      comment: txt,
      time: new Date().toLocaleString(),
      attitude: 1,
    });
    console.log(res);

    // 从新发起请求
    const { data: list } = await http.get('/list');
    // 设置页面数据
    this.setState({
      list,
    });

    // 检查输入内容是否为空
    // if (txt.trim()) return alert('评论内容不能为空');
    // 创建一条评论
    // const comment = {
    //   id: Date.now(),
    //   author: '韩振',
    //   comment: txt,
    //   time: new Date().toLocaleString(),
    //   attitude: 1,
    // };
    // // 修改数组：返回一个新数组
    // const newList = [comment, ...this.state.list];
    // // 设置页面数据
    // this.setState({
    //   list: newList,
    // });

    // 设置输入框焦点
    // this.txtRef.current.focus();
  };

  render() {
    return (
      <div className="comment-container">
        {/* 评论数 */}
        <CommentCount number={this.state.list.length} />
        {/* 排序tab */}
        <Tabs
          tabs={this.state.tabs}
          active={this.state.active}
          changeSortType={this.changeSortType}
        />
        <Forms addComment={this.addComment} />
        {/* 评论列表 */}
        <CommentList
          list={this.state.list}
          delComment={this.delComment}
          changeAttitude={this.changeAttitude}
        />
      </div>
    );
  }
}
